import { Video, View } from '@tarojs/components';
import React, { ReactElement } from 'react';
import { AtButton, AtMessage } from 'taro-ui';
import './live.scss';

interface Props {
  playUrl: string;
  onTimeUpdate: (e) => void;
  env: string;
  onSeekComplete: (e) => void;
  onReLoad: () => void;
}

const perfix = 'live_view';

const Live = ({
  playUrl,
  onTimeUpdate,
  onSeekComplete,
  onReLoad,
  env,
}: Props): ReactElement => (
  <View className={`${env}_${perfix}`}>
    <View className={`${env}_video`}>
      <Video
        id="video"
        src={playUrl}
        initialTime={0}
        controls
        autoplay={false}
        direction={90}
        loop={false}
        muted={false}
        onTimeUpdate={onTimeUpdate}
        onSeekComplete={onSeekComplete}
        nativeProps={{ onSeeked: onSeekComplete }}
      />
    </View>

    <View>
      <AtButton onClick={onReLoad}>同步</AtButton>
    </View>

    <AtMessage />
  </View>
);

export default Live;
